<template>
  <div class="app-container" v-if="pageShow">
    <div class="pages-title">中国医学科学院整形外科医院AICU监护记录单</div>
    <div class="pages-top">
      <div class="top-item">
        <div class="item-key">AICU床号：</div>
        <div class="item-value">
          {{ userInfo && userInfo.bedCode ? userInfo.bedCode : "" }}
        </div>
      </div>
      <div class="top-item">
        <div class="item-key">姓名：</div>
        <div class="item-value">{{ userInfo.patientName }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">性别：</div>
        <div class="item-value">{{ userInfo.sex }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">年龄：</div>
        <div class="item-value">{{ userInfo.age }}岁</div>
      </div>
      <div class="top-item">
        <div class="item-key">体重：</div>
        <div class="item-value">{{ userInfo.weight }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">病案号:</div>
        <div class="item-value">{{ userInfo.mrn }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">科室：</div>
        <div class="item-value">{{ userInfo.departmentName }}</div>
      </div>
    </div>
    <div class="pages-top">
      <div class="top-item">
        <div class="item-key">诊断：</div>
        <div class="item-value">
          {{ userInfo.diagnosis }}
        </div>
      </div>
      <div class="top-item">
        <div class="item-key">入AICU时间：</div>
        <div class="item-value">{{ userInfo.accessTime }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">出AICU时间：</div>
        <div class="item-value">{{ userInfo.leaveTime }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">麻醉医生：</div>
        <div class="item-value">{{ userInfo.anesthetist }}</div>
      </div>
    </div>
    <div class="pages-content">
      <div class="table-content">
        <div class="tr-table">
          <div class="timer-box">
            <div class="timer-left"></div>
            <div class="timerTabList">
              <div
                class="timerTabList-item"
                style="
                  border-left: 1px solid #000;
                  border-bottom: 1px solid #000;
                "
              >
                2023-10-10
              </div>
              <div class="timerTabList-item">
                <div
                  v-for="item in timerTabList"
                  :key="item"
                  class="timer-item"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <div class="physical">
            <div class="physical-list">
              <div
                class="table-box"
                v-for="(item, index) in monitListBox"
                :key="index"
              >
                <div class="item-title">{{ item.title }}</div>
                <div
                  v-for="(item1, index1) in item.timerList"
                  :key="index1"
                  class="item-value"
                >
                  {{ item1.value }}
                </div>
                <div class="clear"></div>
              </div>

              <div
                class="table-box"
                v-for="(item, index) in recordListBox"
                :key="index"
              >
                <div class="item-title">{{ item.title }}</div>
                <div
                  v-for="(item1, index1) in item.timerList"
                  :key="index1"
                  class="item-value"
                >
                  {{ item1.value }}
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div
            class="physical"
            style="border-left: 1px solid #000; border-bottom: 1px solid #000"
          >
            <div class="title-left">生命体征</div>
            <div class="physical-list">
              <div
                class="table-box"
                v-for="(item, index) in ventilateLists"
                :key="index"
              >
                <div class="item-title1">{{ item.title }}</div>
                <div
                  v-for="(item1, index1) in item.timerList"
                  :key="index1"
                  class="item-value"
                >
                  {{ item1.value }}
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div class="physical">
            <div class="physical-list">
              <div
                class="table-box"
                v-for="(item, index) in recordList2"
                :key="index"
              >
                <div class="item-title">{{ item.title }}</div>
                <div
                  v-for="(item1, index1) in item.timerList"
                  :key="index1"
                  class="item-value"
                >
                  {{ item1.value }}
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div
            class="physical"
            style="border-left: 1px solid #000; border-bottom: 1px solid #000"
          >
            <div class="title-left" style="width: 127px">床旁操作</div>
            <div class="list-box">
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in bedsideList1"
                  :key="index"
                >
                  <!-- <div class="item-title1">{{ item.title }}</div> -->
                  <div class="item-value1">
                    {{ item.getHours }}
                  </div>
                  <div class="item-value1">
                    {{ item.operateName }}
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in bedsideList2"
                  :key="index"
                >
                  <!-- <div class="item-title1">{{ item.title }}</div> -->
                  <div class="item-value1">
                    {{ item.getHours }}
                  </div>
                  <div class="item-value1">
                    {{ item.operateName }}
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-left">
        <div class="left-title">病情记录</div>
        <table style="width: 100%">
          <tr>
            <td style="text-align: center; width: 50px">时间</td>
            <td style="text-align: center">内容</td>
            <td style="text-align: center width: 100px">签名</td>
          </tr>
          <tr v-for="(item, index) in icrNursingRecordBoList" :key="index">
            <td>
              {{ item.getHours }}
            </td>
            <td>
              {{ item.nursingContent }}
            </td>
            <td style="width: 100px">
              <!-- {{ item }} -->
              <img
                :src="'data:image/png;base64,' + item.img"
                alt=""
                style="width: 70px; height: 14px"
                v-if="item.img"
              />
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div>
      注:神志:清醒√ 朦胧、嗜睡+ 浅昏迷++ 中度昏迷+++ 深昏迷++++ 醒状昏迷﹟
      麻醉未清醒0 丧失Δ；瞳孔：等大等圆√ 不等大+ 散大固定∞ 对光反应：灵敏√ 迟钝+
      消失++；引流液/尿液颜色:无色透明a 白色b 淡黄色c 黄色d 淡血性e 血性f
      咖啡色g；痰液颜色及黏稠度：白色泡沫状①痰中带血 ② 淡黄色稀薄③ 淡黄色粘稠④
      淡黄色浓稠⑤ 黄色粘稠⑥ 黄色浓稠⑦ 白色粘稠⑧ 粉红色泡沫状⑨ 咖啡色痰⑩；
      气道护理： 气管切开换药1 雾化吸入2 持续气管内滴入3（各项护理均按操作流程）
      第
    </div>
  </div>
</template>

<script>
import {
  recordList,
  ventilateList,
  recordList1,
  monitList,
} from "@/utils/constant.js";
import { selectPatientInfo, selectMonitorrecord } from "@/api/print";
import indexMiXin from "../../mixin/index";
import { formatDate } from "@/utils/index.js";

export default {
  mixins: [indexMiXin],
  props: {
    timerList1: {
      type: Array,
    },
  },
  data() {
    return {
      timerTabList: [[]],
      vitalList: recordList,
      ventilateLists: [],
      recordList2: [],
      monitListBox: [],
      pageShow: false,
      icrNursingRecordBoList: [],
      recordListBox: [],
    };
  },
  created() {
    var that = this;
    this.timerTabList = this.timerList1;
    this.getUseINfo();
    let params = {
      patientNumber: 629149559,
      // baseBeginTime: "2023-04-26 00:00:00",
      // baseEndTime: "2023-04-26 23:59:59",
      baseBeginTime: "2023-04-26 09:00:00",
      baseEndTime: "2023-04-26 20:59:59",
    };
    selectMonitorrecord(params).then((res) => {
      let {
        signRecordBos,
        monitorrecords,
        icrNursingRecordBoList,
        icrMonitordatas,
        icrBedsideOperateBos,
      } = res.data;
      monitorrecords = this.setHour(monitorrecords, "createTime");
      icrNursingRecordBoList = this.setHour(
        icrNursingRecordBoList,
        "operateTime"
      );
      icrMonitordatas = this.setHour(icrMonitordatas, "createdt");
      console.log(icrMonitordatas, "--icrMonitordatas---");

      icrNursingRecordBoList = this.truncateStringByLength(
        icrNursingRecordBoList
      );
      if (icrNursingRecordBoList.length < 24) {
        for (let i = icrNursingRecordBoList.length; i < 24; i++) {
          icrNursingRecordBoList.push({});
        }
      }
      this.icrNursingRecordBoList = icrNursingRecordBoList;
      monitList.forEach((item) => {
        item.timerList.forEach((item1) => {
          monitorrecords.forEach((item2) => {
            if (
              item1.timer == item2.getHours &&
              item.code == "temperatureValue"
            ) {
              item1.value = item2.temperatureValue;
            }
            if (item1.timer == item2.getHours && item.code == "hrValue") {
              item1.value = item2.hrValue;
            }
            if (item1.timer == item2.getHours && item.code == "respValue") {
              item1.value = item2.respValue;
            }
            if (item1.timer == item2.getHours && item.code == "spo2Value") {
              item1.value = item2.spo2Value;
            }
            if (item1.timer == item2.getHours && item.code == "nibpmValue") {
              item1.value = item2.nibpmValue;
            }
          });
        });
      });
      recordList.forEach((item) => {
        item.timerList.forEach((item1) => {
          icrMonitordatas.forEach((item2) => {
            if (
              item1.timer == item2.getHours &&
              item.title == item2.monitordataName
            ) {
              item1.value = item2.monitordataValue;
            }
          });
        });
      });
      that.monitListBox = monitList;
      that.recordListBox = this.filterList(recordList, icrMonitordatas);
      that.ventilateLists = this.filterList(ventilateList, icrMonitordatas);
      that.recordList2 = this.filterList(recordList1, icrMonitordatas);
      let arr = [];
      let arr1 = [];

      icrBedsideOperateBos.forEach((item, index) => {
        item.getHours = formatDate(item.createdt, 2);
        if (index < 12) {
          arr.push(item);
        } else {
          arr1.push(item);
        }
      });
      if (arr.length < 12) {
      }
      console.log(arr, "---arr--");
      that.bedsideList1 = this.arrPush(arr);
      that.bedsideList2 = this.arrPush(arr1);
      console.log(that.ventilateLists, "---that.ventilateLists--");
      that.pageShow = true;
      that.$forceUpdate();
    });
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    truncateStringByLength(list) {
      let result = [];
      list.forEach((item, index) => {
        item.nursingRecord = item.nursingRecord;
        item.num = this.scliceStr(item.nursingRecord);
        if (item.num.length != 0) {
          item.num[0].getHours = item.getHours;
          item.num[item.num.length - 1].img = item.img;
        }
        result = result.concat(item.num);
      });
      return result;
    },
    scliceStr(str) {
      let result = [];
      if (str) {
        for (let i = 0; i < str.length; i += 40) {
          const substring = str.slice(i, i + 40);
          result.push({
            nursingContent: substring,
            nursingTime: "",
            img: "",
          });
        }
      }

      return result;
    },
    filterList(recordList, icrMonitordatas) {
      recordList.forEach((item) => {
        item.timerList.forEach((item1) => {
          icrMonitordatas.forEach((item2) => {
            if (
              item1.timer == item2.getHours &&
              item.title == item2.monitordataName
            ) {
              item1.value = item2.monitordataValue;
            }
          });
        });
      });
      return recordList;
    },
    arrPush(list) {
      for (let i = list.length; i < 12; i++) {
        list.push({});
      }
      return list;
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  border: 1px solid gray;
  word-break: break-all;
}
div {
  font-size: 12px;
}
td {
  border: 1px solid gray;
  height: 19.91px;
  border-left: none;
}
.app-container {
  .pages-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  .pages-top {
    display: flex;
    align-items: flex-end;
    font-size: 18px;
    margin-bottom: 20px;
    .top-item {
      display: flex;
      align-items: flex-end;
      margin-right: 40px;
      .item-key {
        font-weight: 600;
      }
      .item-value {
        max-width: 520px;
        min-width: 100px;
        padding: 0 10px;
        border-bottom: 1px solid #000;
      }
    }
  }
  .pages-content {
    display: flex;
    align-items: flex-start;
    .table-content {
      display: flex;

      .tr-table {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #000;
        .timer-box {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #000;
          border-left: 1px solid #000;
          .timer-left {
            width: 127px;
          }

          .timerTabList {
            display: flex;
            flex-direction: column;
            align-items: center;
            .timerTabList-item {
              display: flex;
              align-items: center;
              justify-content: center;
              // border-bottom: 1px solid #000;
              // border-left: 1px solid #000;

              border-right: none;
              width: 100%;
              // bordr
              .timer-item {
                width: 48px;
                height: 18px;
                border-left: 1px solid #000;
                text-align: center;
              }
            }
          }
        }

        .physical {
          display: flex;
          align-items: center;
          // border-top: 1px solid #000;
          // border-left: 1px solid #000;
          .title-left {
            writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
            // padding: 0 10px;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .list-box {
            display: flex;
            flex-direction: column;
            .physical-list {
              display: flex;
              flex-direction: column;
              flex: 1;

              .clear {
                clear: both;
              }
              .item-value1 {
                text-align: center;
                width: 48px;
                height: 20px;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
                word-break: break-word;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 12px;
              }
            }
          }
          .physical-list {
            display: flex;
            flex-direction: column;
            flex: 1;
            .table-box {
              display: flex;
              div {
                float: left;
              }
              .item-title {
                text-align: center;
                width: 128px;
                height: 20px;
                border-bottom: 1px solid #000;
                border-left: 1px solid #000;
                word-wrap: break-word;
                line-height: 20px;
              }
              .item-title1 {
                text-align: center;
                width: 97px;
                height: 20px;
                border-bottom: 1px solid #000;
                border-left: 1px solid #000;
                word-wrap: break-word;
                line-height: 20px;
              }
              .item-value {
                text-align: center;
                width: 48px;
                height: 20px;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
                word-break: break-word;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 12px;
              }
            }
            .clear {
              clear: both;
            }
            .item-value1 {
              text-align: center;
              width: 48px;
              height: 20px;
              border-left: 1px solid #000;
              border-bottom: 1px solid #000;
              word-break: break-word;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 12px;
            }
          }
        }
      }
    }
    .table-left {
      width: 100%;
      border: 1px solid #000;
      border-left: none;
      .left-title {
        width: 100%;
        text-align: center;
        height: 14px;
      }
    }
  }
}
</style>
